/*window.onload = function(){
    var box =document.getElementById("box");//box
    var smallPic = document.getElementsByClassName("small_pic")[0];  //左侧图片
    var slider = document.getElementsByClassName("slider")[0];  //左侧滑块
    var bigPic = document.getElementsByClassName("big_pic")[0];  //右侧展示区域
    var bigImg = document.getElementsByClassName("big_pic_img")[0];  //右侧图片
    //移入事件
     //移出事件
     smallPic.onmouseout=function(e){
        slider.style.display="none";
        bigPic.style.display="none";
    };
    smallPic.onmousemove=function(e){  //event对象
        slider.style.display="block";
        bigPic.style.display="block";
        //移入点X轴距离-box左间距-滑块的宽度/2
        var left= e.clientX-box.offsetLeft-slider.offsetWidth/2;
        var top= e.clientY-box.offsetTop-slider.offsetHeight/2;
        //滑块移动范围
        if(left<0){
            left=0;
        }else if(left>(smallPic.offsetWidth-slider.offsetWidth)) {
            left=smallPic.offsetWidth-slider.offsetWidth;
        };
        if(top<0){
            top=0;
        }else if(top>(smallPic.offsetHeight-slider.offsetHeight)) {
            top=smallPic.offsetHeight-slider.offsetHeight;
        };
        slider.style.left = left+'px';
        slider.style.top = top+'px';
        //left/最大范围  =X/最大范围
        bigImg.style.left=-(left*(bigImg.offsetWidth-bigPic.offsetWidth)/(smallPic.offsetWidth-slider.offsetWidth))+'px';
        bigImg.style.top=-(top*(bigImg.offsetHeight-bigPic.offsetHeight)/(smallPic.offsetHeight-slider.offsetHeight))+'px';
    }
    
   
}*/